<template>
  <div>
    <van-nav-bar title="选择策略" left-text="重置" right-text="确认" @click-left="activeIdx = null"
                 @click-right="onConfirm"/>
    <van-tabs v-model="activeTmp1">
      <van-tab v-for="item in $types.sectorTypes" :key="item.value" :name="item.value" :title="item.text"/>
    </van-tabs>
    <br/>
    <van-row>
      <van-col :span="12">
        <van-tabs type="card" v-model="activeTmp3" color="#1989fa">
          <van-tab v-for="item in $types.directionTypes" :key="item.value" :name="item.value"
                   :title=" toward === 'opened' ? `开${item.text}`: `平${item.text}`"/>
        </van-tabs>
      </van-col>
      <van-col :span="12">
        <van-tabs type="card" v-model="activeTmp2" color="#1989fa">
          <van-tab v-for="item in $types.periodTypes" :key="item.value" :name="item.value" :title="item.text"/>
        </van-tabs>
      </van-col>
    </van-row>
    <br/>
    <van-radio-group v-model="activeIdx">
      <van-cell-group>
        <van-cell v-for="(item, index) in policyList" v-show="isVisible(item)" :key="index" :title="item.title"
                  clickable @click="activeIdx = index">
          <template #right-icon>
            <van-radio shape="square" :name="index"/>
          </template>
        </van-cell>
      </van-cell-group>
    </van-radio-group>
  </div>
</template>

<script>
import {getOptionsTarget} from '@/utils'

export default {
  props: {
    toward: String,
    url: String
  },
  data() {
    return {
      towardMaps: {
        opened: [{
          direction: 'long',
          side: 'buy'
        }, {
          direction: 'short',
          side: 'sell'
        }],
        closed: [{
          direction: 'long',
          side: 'sell'
        }, {
          direction: 'short',
          side: 'buy'
        }]
      },
      policyList: [],
      activeTmp1: 'stock',
      activeTmp2: 'd',
      activeTmp3: 'long',
      activeIdx: null,
    }
  },
  methods: {
    getOptionsTarget: getOptionsTarget,
    isVisible(item) {
      return item.sector === this.activeTmp1 && item.period === this.activeTmp2 && item.direction === this.activeTmp3;
    },
    onConfirm() {
      let item = {
        title: '选择策略',
        hex_id: null,
        modules: [],
        level: null
      }
      if (this.activeIdx !== null) {
        item = Object.assign({}, this.policyList[this.activeIdx])
      }
      this.$emit('confirm', item)
    },
    load() {
      this.$requests.post(this.url, {
        page: 1,
        limit: 1000,
        order_by: 'sequence',
        sort_direction: 1,
        enabled: true
      }).then(resp => {
        this.policyList = resp.datas.filter(item => {
          for (let i = 0; i < this.towardMaps[this.toward].length; i++) {
            let tempObj = this.towardMaps[this.toward][i]
            if (tempObj.direction === item.direction && tempObj.side === item.side) {
              return true
            }
          }
        })
      })
    }
  },
  mounted() {
    this.load()
  }
}
</script>
